﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AdMaster</title>
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/style1.css" media="all and (min-width:800px)"/>
    <link rel="stylesheet" href="css/style2.css" media="all and ( max-width:799px) and (min-width:668px)"/>
    <link rel="stylesheet" href="css/style3.css" media="all and ( max-width:667px)"/>
<style>
	#d1 li a{
		color:#fff;
		font-size: 16px;
	}
	#d1 li a:hover{
		background:#fff;
		color:#000;
		font-size: 16px;
	}
section .img1 a:hover img{
              //transform:rotate(360deg) scale(1.5);
              transform:rotate(0deg) scale(.9);
              transition-duration:.4s;
		background:#fff;
		box-shadow:5px 5px 5px #ccc;
             
}
section .img1 img{
              //transform:rotate(360deg) scale(1.5);
              transform:rotate(0deg) scale(.85);
             // transition-duration:.5s;
             
}
.img1 ul li{
	margin-top:0px;
}
#hh h2{
	padding-top:0px;
	margin: 4px auto;
	align:center;
	
}

</style>
</head>
<body>
    <header>
        <h2><a href="#">明晓溪主要作品</a></h2>
        <nav>
            <img id="imgLogo" src="images/1.png" alt=""/>
            <ul id="d1">
                <li ><a href="#mingruo">明若晓溪系列</a></li>
                <li><a href="#liehuo"> 烈火如歌系列</a></li>
                <li><a href="#paomo"> 泡沫之夏系列</a></li>
                <li><a href="#xuanfeng">旋风少女系列</a></li>
                <li><a href="#qita">其他作品系列</a></li>
            </ul>
        </nav>
    </header>

    <section>
    	
     
        <div class="row row3 img1">
           
            <h2>明若晓溪系列</h2>
            
            <ul>
                <li>
                    <a href="page2.html"><img src="images/image/1.jpg"/></a>
                    <h3>水晶般透明</h3>
                   
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                   <a href="page2.html"><img src="images/image/2.jpg"/></a>
                    <h3>冬日最灿烂的阳光</h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                    <a href="page2.html"><img src="images/image/3.jpg"/></a>
                    <h3>无往而不胜的童话</h3>
                   
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                    <a href="page2.html"><img src="images/image/4.jpg"/></a>
                    <h3>雨夜里的星星沙</h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                   <a href="page2.html"><img src="images/image/5.jpg"/></a>
                    <h3>握在手里的星星</h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                    <a href="page2.html"><img src="images/image/6.jpg"/></a>
                    <h3>冰</h3>
                   
                    <a href="page2.html">Find out more</a>
                </li>
            </ul>
            
            <h2 id="qita">其它作品</h2>
            <ul>
                <li>
                    <a href="page2.html"><img src="images/image/7.jpg"/></a>
                    <h3>会有天使替我爱你</h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                   <a href="page2.html"><img src="images/image/8.jpg"/></a>
                    <h3>我是暗夜里的罂粟</h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                    <a href="page2.html"><img src="images/image/9.jpg"/></a>
                    <h3>玉壶儿江湖散记</h3>
                   
                    <a href="page2.html">Find out more</a>
                </li>
                 <li>
                   <a href="page2.html"><img src="images/image/10.jpg"/></a>
                    <h3>小鱼的向日葵</h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                    <a href="page2.html"><img src="images/image/11.jpg"/></a>
                    <h3>小兔的女神手记</h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
            </ul>
            
             <h2 id="xuanfeng">旋风少女系列</h2>
         <ul>
         <li>
                    <a href="page2.html"><img src="images/image/12.jpg" alt=""/>
                    <h3>旋风少女1</h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                    <a href="page2.html"><img src="images/image/13.jpg" alt=""/>
                    <h3>旋风少女2 </h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                    <a href="page2.html"><img src="images/image/14.jpg" alt=""/>
                    <h3>旋风少女3</h3>
                   
                    <a href="page2.html">Find out more</a>
                </li>	
                <li>
                    <a href="page2.html"><img src="images/image/15.jpg" alt=""/>
                    <h3>旋风少女4</h3>
                   
                    <a href="page2.html">Find out more</a>
                </li>	
         </ul>
             <h2 id="paomo">泡沫之夏系列</h2>
            <ul>
                <li>
                    <a href="page2.html"><img src="images/image/16.jpg"/></a>
                    <h3>泡沫之夏系列1</h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                   <a href="page2.html"><img src="images/image/17.jpg"/></a>
                    <h3>泡沫之夏系列2</h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                    <a href="page2.html"><img src="images/image/18.jpg"/></a>
                    <h3>泡沫之夏系列3</h3>
                   
                    <a href="page2.html">Find out more</a>
                </li>
            </ul>
            
           
         <h2 id="liehuo">烈火如歌系列</h2>
            <ul>
                <li>
                    <a href="page2.html"><img src="images/image/20.jpg"/></a>
                    <h3>烈火如歌系列1</h3>
                   
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                   <a href="page2.html"><img src="images/image/19.jpg"/></a>
                    <h3>烈火如歌系列2</h3>
                   
                    <a href="page2.html">Find out more</a>
                </li>
                <li>
                    <a href="page2.html"><img src="images/image/20.jpg"/></a>
                    <h3>烈火如歌系列3</h3>
                    
                    <a href="page2.html">Find out more</a>
                </li>
            </ul>
         
        </div>

    </section>

    <footer>
        <p> Copyright © 2018.Company name All rights reserved.</p>
    </footer>

    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $('#imgLogo').click(function () {
            $('nav ul').toggle();
        })
    </script>
</body>
</html>